<template>
    <div >
        <router-view style="padding-bottom:60px"></router-view>
        <div class="tabsss"> 
             <router-link :to="item.path" v-for="(item,index) in list" :key="index" exact-active-class="active">
            <img :src="$route.path == item.path ? item.imgFull : item.img" alt="">
            <span>{{ item.text }}</span>
        </router-link>

        </div>
      
    </div>
</template>

<script>
import home from "../assets/img/tabbar/home.png"
import homeFull from "../assets/img/tabbar/homeFull.png"

import cate from "../assets/img/tabbar/cate.png"
import cateFull from "../assets/img/tabbar/cateFull.png"

import cart from "../assets/img/tabbar/shop.png"
import cartFull from "../assets/img/tabbar/shopFull.png"

import my from "../assets/img/tabbar/user.png"
import myFull from "../assets/img/tabbar/userFull.png"

export default {
    data() {
        return {
            list: [
                { text: "首页", path: "/home", img: home, imgFull: homeFull },
                { text: "分类", path: "/cate", img: cate, imgFull: cateFull },
                { text: "购物车", path: "/cart", img: cart, imgFull: cartFull },
                { text: "我的", path: "/user", img: my, imgFull: myFull }
            ]
        };
    }
};
</script>

<style >
.tabsss {
    width: 100%;
    height: 2.6rem;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    box-shadow: 5px 5px 5px 7px #fff;
    display: flex;
}

a {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: gray
}

a.active {
    color: orangered;
}

a span {
    font-size: .2rem;
}

a img {
    width: 1.6rem;
    height: 1.6rem;
}
</style>
